<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./login.css" />
    <script src="./ajax.js" type="text/javascript" charset="utf-8"></script>
    <script src="cookie.js" type="text/javascript" charset="utf-8"></script>
    <title>Document</title>
  </head>

  <body>
    <div class="loginContainer">
      <h1>登录</h1>
      <form action="/checkUser" method="post" onsubmit="return false;">
        姓名：
        <input
          class="inputStyle1 inputStyle username"
          type="text"
          name="username"
        />
        <span class="exchange">用户名不正确</span>
        <br />密码：
        <input class="inputStyle pwd" type="password" name="pwd" /><br />
        记住我 <input type="checkbox" class="remeber" />
        <input class="loginStyle" type="submit" value="登录" />
      </form>
    </div>
  </body>
  <script>
    // 1.jwt  json web token 保持登录态（前后端配合）；  2.session（纯后端：运行在服务器）  3.cookie(前端可以操作)
    let usernameEle = document.querySelector(".username");
    let pwdEle = document.querySelector(".pwd");
    let loginEle = document.querySelector(".loginStyle");
    let remeberEle = document.querySelector(".remeber");

    loginEle.onclick = function () {
      let username = usernameEle.value;
      let pwd = pwdEle.value;
      ajax({
        url: "checkUser.php",
        method: "post",
        data: {
          username,
          pwd,
        },
        dataType: "json",
        success(res) {
          // console.log(res);
          if (res.status == 1) {
            console.log(res);
            if (remeberEle.checked) {
              setCookie("username", res.data.username, 3600 * 24 * 7);
              setCookie("uid", res.data.id, 3600 * 24 * 7);
            }

            window.location.href = "./cart/shopping_cart.html";
          }
        },
      });
    };
  </script>
</html>
